/* App.vue 全局样式 */
/* 1. 默认主题（浅色模式） */
:root.light-theme {
  /* 导航栏/状态栏 */
  --nav-bg-color: #FFFFFF; /* 导航栏背景色 */
  --nav-text-color: #333333; /* 导航栏文字颜色 */
  --nav-icon-color: #333333; /* 导航栏图标颜色 */
  --status-bar-color: #FFFFFF; /* 状态栏背景色（仅App端有效） */

  /* 页面背景 */
  --page-bg-color: #F5F5F5; /* 页面整体背景色 */
  --container-bg-color: #FFFFFF; /* 容器（卡片）背景色 */

  /* 文本颜色 */
  --text-primary: #333333; /* 主要文本（标题、正文） */
  --text-secondary: #666666; /* 次要文本（副标题、说明） */
  --text-tertiary: #999999; /* 辅助文本（提示、时间） */
  --text-disabled: #CCCCCC; /* 禁用文本 */
  --text-link: #007AFF; /* 链接文本 */

  /* 按钮 */
  --btn-primary-bg: #007AFF; /* 主按钮背景 */
  --btn-primary-text: #FFFFFF; /* 主按钮文字 */
  --btn-primary-active: #0051AA; /* 主按钮点击态 */
  --btn-secondary-bg: #F0F0F0; /* 次要按钮背景 */
  --btn-secondary-text: #333333; /* 次要按钮文字 */
  --btn-secondary-active: #E0E0E0; /* 次要按钮点击态 */
  --btn-disabled-bg: #EEEEEE; /* 禁用按钮背景 */
  --btn-disabled-text: #BBBBBB; /* 禁用按钮文字 */

  /* 边框/分割线 */
  --border-color: #EEEEEE; /* 普通边框 */
  --border-light: #F5F5F5; /* 浅色边框 */
  --divider-color: #EEEEEE; /* 分割线颜色 */

  /* 表单 */
  --input-bg-color: #FFFFFF; /* 输入框背景 */
  --input-text-color: #333333; /* 输入框文字 */
  --input-placeholder: #CCCCCC; /* 输入框提示文字 */
  --input-border-color: #EEEEEE; /* 输入框边框 */
  --input-focus-border: #007AFF; /* 输入框聚焦边框 */

  /* 列表 */
  --list-item-bg: #FFFFFF; /* 列表项背景 */
  --list-item-active: #F5F5F5; /* 列表项点击态 */
  --list-arrow-color: #CCCCCC; /* 列表箭头图标 */

  /* 其他辅助 */
  --success-color: #4CD964; /* 成功色 */
  --warning-color: #FF9500; /* 警告色 */
  --error-color: #FF3B30; /* 错误/危险色 */
  --loading-color: #007AFF; /* 加载动画颜色 */
  --mask-color: rgba(0, 0, 0, 0.5); /* 遮罩层颜色 */
}

/* 2. 深色主题（通过添加 .dark-theme 类名激活） */
:root.dark-theme {
  /* 导航栏/状态栏 */
  --nav-bg-color: #1A1A1A;
  --nav-text-color: #FFFFFF;
  --nav-icon-color: #FFFFFF;
  --status-bar-color: #1A1A1A;

  /* 页面背景 */
  --page-bg-color: #121212;
  --container-bg-color: #1E1E1E;

  /* 文本颜色 */
  --text-primary: #FFFFFF;
  --text-secondary: #DDDDDD;
  --text-tertiary: #AAAAAA;
  --text-disabled: #666666;
  --text-link: #58A9FF;

  /* 按钮 */
  --btn-primary-bg: #0051AA;
  --btn-primary-text: #FFFFFF;
  --btn-primary-active: #003A7A;
  --btn-secondary-bg: #333333;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-active: #444444;
  --btn-disabled-bg: #2C2C2C;
  --btn-disabled-text: #777777;

  /* 边框/分割线 */
  --border-color: #333333;
  --border-light: #2C2C2C;
  --divider-color: #333333;

  /* 表单 */
  --input-bg-color: #333333;
  --input-text-color: #FFFFFF;
  --input-placeholder: #666666;
  --input-border-color: #444444;
  --input-focus-border: #58A9FF;

  /* 列表 */
  --list-item-bg: #1E1E1E;
  --list-item-active: #333333;
  --list-arrow-color: #666666;

  /* 其他辅助 */
  --success-color: #38B273;
  --warning-color: #E68A00;
  --error-color: #D43C33;
  --loading-color: #58A9FF;
  --mask-color: rgba(0, 0, 0, 0.7);
}